<template>
    <div>
        <PageHeader />
        <!--使用组件：把声明的组件，当作标签来使用即可-->
        <PageNav />
        <div class="list">
            <div class="box">
                <div class="path">首页 / 我的购物车</div>
                <div class="detail">
                    <div v-if="tableData.length <= 0">没有购买商品，<router-link to="/">现在就去购物吧</router-link></div>
                    <div v-else>
                        <div style="text-align:left;">
                            <el-button type="danger" size="mini" @click="eventDeleteAll">批量删除</el-button>
                        </div>
                        <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
                            <el-table-column type="selection" width="55">
                            </el-table-column>
                            <el-table-column label="商品图片" width="180">
                                <template slot-scope="scope">
                                    <img :src="'http://localhost:5286/' + scope.row.coverImg" class="image"
                                        style="width:50px;" />
                                </template>
                            </el-table-column>
                            <el-table-column prop="goodsName" label="商品名称" width="180">
                            </el-table-column>
                            <el-table-column prop="goodsPrice" label="商品价格">
                            </el-table-column>
                            <el-table-column label="商品数量">
                                <template slot-scope="scope">
                                    <el-input-number v-model="scope.row.goodsNumber" size="mini"
                                        @change="handleChange(scope.row.goodsName, scope.row.goodsNumber)" :min="1"
                                        :max="10" label="描述文字"></el-input-number>
                                </template>
                            </el-table-column>
                            <el-table-column label="小计">
                                <template slot-scope="scope">
                                    {{ scope.row.goodsPrice * scope.row.goodsNumber }}
                                </template>
                            </el-table-column>
                            <el-table-column label="操作">
                                <template slot-scope="scope">
                                    <el-button size="mini" type="danger" @click="eventDelete(scope.row)">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>


                        <div
                            style="margin-top: 20px;    height: 40px;    line-height: 40px;    border: 1px solid #dcdcdc;">
                            <el-row>
                                <el-col :span="20">
                                    共<span class="money">{{ goodsCount }}</span>件商品，
                                    已选择<span class="money">{{ selectGoodsCount }}</span>件 |
                                    商品合计：<span class="money"> ¥{{ selectGoodsTotal }}</span>元
                                    活动优惠（运费）：¥-{{ payGoodsYF }}元 |
                                    应付总金额：<span class="money total">¥{{ payGoodsTotal }}</span>元
                                </el-col>
                                <el-col :span="4">
                                    <!-- <div style="background:#dcdcdc;color:white;">立即下单</div> -->
                                    <el-button type="danger" :disabled="buttonStatueEable"
                                        style="width: 100%;border-radius: 0;" @click="eventSettle">立即结算</el-button>
                                </el-col>
                            </el-row>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <PageCustom />
        <PageFooter />
    </div>

</template>

<script>
//引入组件页面
import PageNav from '@/components/PageNav.vue'
import PageHeader from '@/components/PageHeader.vue'
import PageCustom from '@/components/PageCustom.vue'
import PageFooter from '@/components/PageFooter.vue'

export default {
    components: {
        //声明刚才我们引入的页面，是一个组件
        PageNav,PageHeader,PageCustom,PageFooter
    },
    data() {
        return {
            tableData: [],
            multipleSelection: [],
            goodsCount: 0, //购物车中，商品的总件数（相同的商品按一件计算）
            selectGoodsCount: 0,//选中的商品的总件数
            goodsTotal: 0.00, //选中的商品的总金额    -----用计算属性替代
            goodsYH: 0.00,//优惠金额 (运费也在其中)  （暂时的约定规则：购买金额超200元（含），则免运费，否则需要10.00元运费）  ----用计算属性替代
            payTotal: 0.00, //应付总金额    -----用计算属性替代
            buttonEable: true, //下单按钮是否能点击（默认不能。只有选择了商品才可以）    -----用计算属性替代
        }
    },

    //计算属性
    computed: {
        //选中商品的总金额
        selectGoodsTotal() {
            let t = 0
            this.multipleSelection.forEach(element => {
                t += element.goodsNumber * element.goodsPrice
            });
            return t.toFixed(2)
        },
        //应支付总金额（计算了运费）
        payGoodsTotal() {
            let t = this.selectGoodsTotal
            let s = 0

            if (t > 0 && t < 200) {
                s = parseFloat(t) + 10    //在商品总金额200以内的，需要加10元运费 
                return s.toFixed(2)
            }
            else {
                return t
            }
        },
        //下单按钮的状态
        buttonStatueEable() {
            let t = this.selectGoodsTotal
            if (t > 0) {
                return false
            } else {
                return true
            }
        },
        //优惠（运费）
        payGoodsYF() {
            let t = this.selectGoodsTotal
            if (t >= 200) {
                return 10
            } else {
                return 0
            }
        }
    },
    methods: {
        //结算按钮事件
        eventSettle(){
            //1.判断是否登录
            //2.将选中的商品，传到结算页面（选中的商品，暂时没有去验证库存是否足够）

            //如何判断用户（会员）是否登录   ----用localStorage的时候，这个key别忘了
            let user =   localStorage.getItem('liangcaigen')           
            if(user == null)
            {
                this.$message.error('请登录')
                return
            }

            //如何获取选中的商品，并传到结算页面
            // this.multipleSelection 这个变量就是用来保存table中选中的行的数据
            //console.log(this.multipleSelection)
            //怎么把选中商品（有可能多个）传到结算页面
            
            //1）this.$router.push（这个是带着数据一起跳转 --- 缺点：目标页面一刷新数据就没了）        
            // this.$router.push({  
            //     name: 'car/settle',   
            //     params:{ 
            //         data:this.multipleSelection,
            //         label:'将选中的多个商品传到结算页面' 
            //     }   
            // })

            //2）本地内存(选中的数据放进内存后，然后需要跳转)
            //setItem的value是string类型，而我们的数据是数组集合类型，所以需要把数据集合转换为字符串，才能存进去
            let d = JSON.stringify(this.multipleSelection)   //这一句就是将数组对象，转换为json字符串
            localStorage.setItem('selectCarData',d)   
            this.$router.push('/car/settle')
        },

        //表格选中事件
        handleSelectionChange(val) {
            this.multipleSelection = val;
            this.selectGoodsCount = this.multipleSelection.length

            if (this.multipleSelection.length > 0) {

                // let m = 0
                // this.multipleSelection.forEach(x => {
                //     m += (x.goodsNumber * x.goodsPrice)   //括号里面的表示：每一个商品的数量*这个商品的单价。然后通过 += 进行累加 
                // })
                // this.goodsTotal = m.toFixed(2)

                // if (m >= 200) {
                //     this.goodsYH = 10.00
                //     this.payTotal = this.goodsTotal
                // }
                // else if (m > 0) {
                //     this.goodsYH = 0                    
                //     let t =  parseFloat(this.goodsTotal) + 10  //总金额不足200元，则需要10块运费                  
                //     this.payTotal = t.toFixed(2)
                // }

                this.buttonEable = false
            }
            else {
                this.buttonEable = true
                // this.payTotal = 0
                // this.goodsYH = 0
                // this.goodsTotal = 0
            }
        },
        //批量删除事件
        eventDeleteAll() {
            //this.multipleSelection
            //这个数据包含了我们所有需要的数据：1、会员id、2、商品名称（商品ID）

            // let url = 'http://localhost:5286/goods/car/delete'

            // this.$http.delete(url, { data: this.multipleSelection }).then(res => {
            //     console.log(res)
            //     this.onloadData()
            // })

            this.deleteData(this.multipleSelection)
        },
        //删除事件
        eventDelete(row) {
            let data = []
            data.push({
                "memberId": row.memberId,
                "goodsId": "string",
                "goodsName": row.goodsName,
                "goodsNumber": 0,
                "goodsPrice": 0
            })
            this.deleteData(data)
        },
        //封装删除方法
        deleteData(data) {
            this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let url = 'http://localhost:5286/goods/car/delete'

                //可以直接用post提交
                // this.$http.post(url, data).then(res => {
                //     console.log(res)

                //     this.onloadData()
                // })

                this.$http.delete(url, { data: data }).then(res => {
                    console.log(res)
                    this.onloadData()
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        //计数器事件
        handleChange(name, value) {

            console.log(this.multipleSelection)

            //修改谁的缓存数据 -- 会员ID
            //修改哪条商品  --  商品ID
            //修改这条商品的具体数量  -- 更新后的数量

            //console.log(name)
            //console.log(value);

            let url = 'http://localhost:5286/goods/car/update'
            let data = {
                "memberId": "ddd",
                "goodsId": "",
                "goodsName": name,
                "goodsNumber": value,
                "goodsPrice": 0
            }
            this.$http.post(url, data).then(res => {
                console.log(res)
            })

        },
        onloadData() {
            let memberId = localStorage.getItem('liangcaigen')
            let url = 'http://localhost:5286/goods/car/list?key='+memberId
            this.$http.get(url).then(res => {
                //console.log(res)
                this.tableData = res.data.data
                this.goodsCount = this.tableData.length
            })
        }
    },
    mounted() {
        this.onloadData()
    }
}
</script>


<style scoped>



.money {
    color: red;
    margin: 3px 8px;
}

.total {
    font-size: 30px;
}
</style>